<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		  标签属性:
		   1.固有属性
		   2.自定义属性,以data-开始, 如果自定义属性由多个单词组成，获取时使用驼峰命名法
		-->
		<img src="img/DOM对象树.png" width="300px" height="200px" data-bwf="atstudy" data-color-name="orange"/>
		<button id="b1">获取属性</button>
		<button id="b2">设置属性</button>
		<button id="b3">删除属性</button>
		<script type="text/javascript">
			//---------------------获取----------------------------------
			//根据id选择器获取button节点对象
			var b1 = document.querySelector('#b1');
			//为button节点对象设置onclick属性值（绑定函数）
			b1.onclick = function() {
				//-----------------固有属性-----------------------------------------------
				//根据标签选择器获取img节点对象
				var img = document.querySelector('img');
				//获取img节点对象的src属性值
				var val = img.getAttribute('src');
				// console.log(val);
				// console.log(img.src);

				//-----------------自定义属性-----------------------------------------------
				// console.log(img.dataset.bwf);
				console.log(img.dataset.colorName);
			}

			//---------------------设置----------------------------------
			var b2 = document.querySelector('#b2');
			b2.onclick = function() {
				//-----------------固有属性-----------------------------------------------
				var img = document.querySelector('img');
				// img.setAttribute('src','img/ISTQB备考大揭秘.jpg');
				img.src = 'img/ISTQB备考大揭秘.jpg';
				img.width = '600';
				img.name = 'abc';

				//-----------------自定义属性-----------------------------------------------
				img.dataset.bwf = '123';
			}

			//---------------------删除----------------------------------
			var b3 = document.querySelector('#b3');
			b3.onclick = function() {
				var img = document.querySelector('img');
				// img.removeAttribute('data-bwf');
				img.removeAttribute('height');
			}
		</script>
	</body>
</html>
